<template>
  <div class="content">
    <van-tabs v-model="active"  @click="onClick">
      <van-tab title="待付款">
        <div style="height: 12px;background-color: #fff;"></div>
        <div class="cardList" v-for="(item,index) in list" :key="index" @click="gotoDeatil(item.id)">
          <div class="listHead">
            <div class="headName">{{item.cinemaName}}<van-icon name="arrow" color="#AFAFAF"/></div>
            <div class="time">支付剩余时间 {{timeshowList[index]}}</div>
          </div>
          <div class="listContent">
            <img class="contentImg" :src="item.cover" alt="" />
            <div class="contentText">
              <div class="text1">{{item.filmName}}</div>
              <div class="text2">电影评分 <span style="color: #FF6060;">{{item.score/100==0?'暂无评分':item.score/100}}</span></div>
              <div class="text3">导演:{{item.director}}</div>
              <div class="text3">主演:{{item.cast}}</div>
              <div class="text3">类型:{{item.type}}</div>
            </div>
            <div class="button" @click.stop="gotoPay(item.id)">付款</div>
          </div>
          <div class="listBottm">
            <div class="price">总价:{{item.actualPrice}}元</div>
            <div class="Bottmbutton" @click.stop="closeOrder(item.id)">取消订单</div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已付款">
        <div style="height: 12px;background-color: #fff;"></div>
        <div class="cardList" v-for="(item,index) in list" :key="index" @click="gotoDeatil(item.id)">
          <div class="listHead">
            <div class="headName">{{item.cinemaName}}<van-icon name="arrow" color="#AFAFAF"/></div>
            <div class="status">已完成</div>
          </div>
          <div class="listContent">
            <img class="contentImg" :src="item.cover" alt="" />
            <div class="contentText">
              <div class="text1">{{item.filmName}}</div>
              <div class="text2">电影评分 <span style="color: #FF6060;">{{item.score/100==0?'暂无评分':item.score/100}}</span></div>
              <div class="text3">导演:{{item.director}}</div>
              <div class="text3">主演:{{item.cast}}</div>
              <div class="text3">类型:{{item.type}}</div>
            </div>
            <div class="button2"></div>
          </div>
          <div class="listBottm">
            <div class="price">总价:{{item.actualPrice}}元</div>
            <!-- <div class="Bottmbutton">删除订单</div> -->
          </div>
        </div>
      </van-tab>
      <van-tab title="退款">
        <div style="height: 12px;background-color: #fff;"></div>
        <div class="cardList" v-for="(item,index) in list" :key="index" @click="gotoDeatil(item.id)">
          <div class="listHead">
            <div class="headName">{{item.cinemaName}}<van-icon name="arrow" color="#AFAFAF"/></div>
            <div class="time">已退款</div>
          </div>
          <div class="listContent">
            <img class="contentImg" :src="item.cover" alt="" />
            <div class="contentText">
              <div class="text1">{{item.filmName}}</div>
              <div class="text2">电影评分 <span style="color: #FF6060;">{{item.score/100}}</span></div>
              <div class="text3">导演:{{item.director}}</div>
              <div class="text3">主演:{{item.cast}}</div>
              <div class="text3">类型:{{item.type}}</div>
            </div>
            <div class="button2"></div>
          </div>
          <div class="listBottm">
            <div class="price">总价:{{item.actualPrice}}元</div>
            <!-- <div class="Bottmbutton">删除订单</div> -->
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {
  setStore,
  getStore,
  removeStore
} from '@/utils/storage'
import wx from 'weixin-js-sdk'
import {Tabbar, TabbarItem,Dialog} from 'vant';
import {orderList,cancelOrder,prepay} from '@/api/home.js'
export default {
  name: "order",
  data() {
    return {
      active: 0,
      list:[],
      timer:null,
      timenumber:0,
      timeList:[],
      timeshowList:[]
    };
  },
  computed:{
  },
  mounted() {
    if(this.$route.query.systemCode){
      setStore('systemCode',this.$route.query.systemCode)
    }
    this.orderList()
  },
  methods: {
    timers(time){
      let times = new Date(time).getTime() - new Date()
      let date = new Date(times)
      let m = date.getMinutes()
      let s = date.getSeconds()
      return (m<10?'0'+m:m)+':'+(s<10?'0'+s:s)
    },
    orderList(){
      let data = {
        type:this.active
      }
      orderList(data).then(res=>{
        this.list = res.list
        if(this.active==0){
          this.timeList = []
          this.list.forEach((item,index)=>{
            this.timeList.push(new Date(item.unLockTime).getTime() - new Date())
          })
        console.log( this.timeList)
          this.timeList.forEach((item,index)=>{
            if(item>0){
              this.timeList[index] = this.timeList-1000
              let date = new Date(item)
              let m = date.getMinutes()
              let s = date.getSeconds()
              this.timeshowList[index] =  (m<10?'0'+m:m)+':'+(s<10?'0'+s:s)
            }else{
              this.timeshowList[index] = '00:00'
            }
          })
          clearInterval(this.timer)
          this.timer = null
          this.timer = setInterval(()=>{
            this.timeList.forEach((item,index)=>{
              if(item>0){
                this.timeList[index] = this.timeList-1000
                let date = new Date(item)
                let m = date.getMinutes()
                let s = date.getSeconds()
                this.timeshowList[index] =  (m<10?'0'+m:m)+':'+(s<10?'0'+s:s)
              }else{
                this.timeshowList[index] = '00:00'
                this.orderList()
              }
            })
            this.$forceUpdate()
          },1000)
        }

      })
    },
    onClick(e){
      this.list = []
      this.orderList()
    },
    closeOrder(id){
      let that = this
      Dialog.confirm({
        message: '确认取消',
      })
        .then(() => {
          // on confirm
          let data = {
            orderId:id
          }
          cancelOrder(data).then(res=>{
            console.log(res)
             Dialog.alert({
               message: '操作成功',
             }).then(() => {
               // on close
               that.orderList()
             });
          })
        })
        .catch(() => {
          // on cancel
        });

    },
    gotoPay(id){
      let that = this
      let data = {
        orderId:id,
        tradeType:'JSAPI',
        openId:getStore('openId')?getStore('openId'):'',
        appId:getStore('appId')?getStore('appId'):''
      }
      prepay(data).then(res=>{
        if (res.msg === 'success') {
          if (typeof WeixinJSBridge === 'undefined') {
            if (document.addEventListener) {
              document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false)
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
              document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
            }
          } else {
            if(window.__wxjs_environment === 'miniprogram'){
              console.log('在小程序')
              wx.miniProgram.postMessage({ data: {base64:res.data} })
              wx.miniProgram.navigateBack({
                delta: 1, //小程序必须有该目录
                success() {
                  console.log("跳转成功");
                },
                fail(err) {
                  console.log('跳转失败', err)
                },
                complete() {
                  console.log("执行");
                }
              })
            }else{
              that.onBridgeReady(res.data)
            }
          }
        }
      })
    },
    onBridgeReady(data) {
      const that = this
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
          appId: data.appId, // 公众号名称，由商户传入
          timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
          nonceStr: data.nonceStr, // 随机串
          package: data.packageValue, // 微信订单id
          signType: 'MD5', // 微信签名方式：
          paySign: data.paySign // 微信签名
        },
        function(res) {
          console.log(res)
          if (res.err_msg === 'get_brand_wcpay_request:ok') {
            // 付款成功
            that.tipsMessage('购买成功')
            that.active = 0
            setTimeout(()=>{
              that.orderList()
            },1000)
          } else {
            that.tipsMessage('未完成支付...')
          }
        }
      )
    },
    gotoDeatil(id){
      this.$router.push({
        path:'/orderDetail?id='+id
      })
    },
    //提示信息
    tipsMessage(text) {
      Dialog.alert({
        message: text,
      }).then(() => {
      });
    },
  },
  watch: {},
};
</script>

<style scoped lang="scss">
  .content{
    width: 100vw;
    min-height: 100vh;
    background-color: #EBF2FC;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: 100px;
    .cardList{
      width: 375px;
      height: 213px;
      background-color: #fff;
      margin-top: 12px;
      overflow: hidden;
      .listHead{
        width: 100%;
        height: 42px;
        box-sizing: border-box;
        border-bottom: 1px solid #EBEBEB;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        .headName{
          width: 200px;
          font-weight: 400;
          font-size: 14px;
          color: #AFAFAF;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .time{
          font-weight: 400;
          font-size: 13px;
          color: #FD564D;
        }
        .status{
          font-weight: 400;
          font-size: 13px;
          color: #AFAFAF;
        }
      }
      .listContent{
        width: 100%;
        height: 129px;
        box-sizing: border-box;
        padding: 0 27px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #EBEBEB;
        .contentImg{
          display: block;
          width: 74px;
          height: 97px;
        }
        .contentText{
          margin-left: 9px;
          width: 168px;
          overflow: hidden;
          .text1{
            font-weight: 500;
            font-size: 15px;
            color: #333333;
            margin-top: 7px;
            width: 168px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .text2{
            font-weight: 500;
            font-size: 12px;
            color: #333333;
            margin-top: 7px;
            width: 168px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .text3{
            font-weight: 400;
            font-size: 12px;
            color: #757171;
            margin-top: 5px;
            width: 168px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .button{
        width: 50px;
        height: 23px;
        background-color: #FD564D;
        text-align: center;
        line-height: 24px;
        font-weight: 400;
        font-size: 13px;
        color: #FFFFFF;
        border-radius: 10px;
      }
      .button2{
        width: 50px;
        height: 23px;
        background-color: #FD564D00;
        text-align: center;
        line-height: 24px;
        font-weight: 400;
        font-size: 13px;
        color: #FFFFFF;
        border-radius: 10px;
      }
    }
    .listBottm{
      width: 100%;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 25px;
      box-sizing: border-box;
      .price{
        font-weight: 400;
        font-size: 14px;
        color: #AFAFAF;
      }
      .Bottmbutton{
        width: 76px;
        height: 23px;
        border-radius: 12px 12px 12px 12px;
        border: 1px solid #AFAFAF;
        text-align: center;
        line-height: 23px;
        box-sizing: border-box;
        font-weight: 400;
        font-size: 13px;
        color: #AFAFAF;
      }
    }
    ::v-deep .van-tabs__line{
      background-color: #1484FB !important;
    }
  }
</style>
